<template>
    <div class="container">
        <div class="hotel_filter">
            <el-form v-model="filter_form" class="form">
                <el-form-item>
                    <el-autocomplete
                        v-model="filter_form.city"
                        :trigger-on-focus="false"
                        :fetch-suggestions="querySearch"
                        placeholder="切换城市"
                        class="form_input"
                        @select="handleSelectDepart"
                        @blur="departGetReadyData"
                    />
                </el-form-item>
                <el-form-item>
                    <div class="block">
                        <el-date-picker
                            v-model="filter_form.date"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd"
                            :picker-options="pickerOptions"
                        />
                    </div>
                </el-form-item>
                <el-form-item class="popover_button_text_class">
                    <el-popover
                        ref="popover"
                        v-model="show"
                        placement="bottom"
                        width="326"
                        trigger="click"
                        popper-class="tip"
                        @show="popover_show"
                    >
                        <div class="top">
                            <span>每间</span>
                            <div class="top_right">
                                <el-select
                                    v-model="filter_form.adults_number"
                                    size="mini"
                                >
                                    <el-option
                                        v-for="item in 7"
                                        :key="item"
                                        :value="item"
                                        :label="item+' 成人'"
                                    >
                                        <span style="float: left">{{ item }}</span>
                                        <span style="float: right; color: #8492a6; font-size: 13px">成人</span>
                                    </el-option>
                                </el-select>
                                <el-select
                                    v-model="filter_form.children_number"
                                    size="mini"
                                >
                                    <el-option
                                        v-for="item in 5"
                                        :key="item"
                                        :value="item-1"
                                        :label="item-1+' 儿童'"
                                    >
                                        <span style="float: left">{{ item-1 }}</span>
                                        <span style="float: right; color: #8492a6; font-size: 13px">儿童</span>
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="bottom">
                            <el-button
                                type="primary"
                                size="mini"
                                @click="hide_popover"
                            >
                                确定
                            </el-button>
                        </div>
                        <el-button
                            slot="reference"
                            plain
                            width="300"
                            :class="{'popover_active':popover_active}"
                        >
                            {{ popover_text }}
                            <i class="el-input__icon iconfont iconuser" />
                        </el-button>
                    </el-popover>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        @click="search"
                    >
                        查看价格
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        inject: ["reload"],
        data () {
            return {
                filter_form: {
                    city: "",
                    date: [],
                    adults_number: "",
                    children_number: ""
                },
                pickerOptions: {
                    disabledDate (time) {
                        return time.getTime() < Date.now() - 24 * 60 * 60 * 1000;
                    }
                },
                popover_active: false,
                show: false,
                popover_text: "人数未定"
            };
        },
        created () {
            if (this.$route.query.cityName) {
                this.filter_form.city = this.$route.query.cityName;
            }
        },
        methods: {
            querySearch (queryString, callback) {
                this.$axios.get("/airs/city", {
                    params: {
                        name: queryString
                    }
                }).then((res) => {
                    if (res.data && res.data.data) {
                        this.ready_select_data = res.data.data[0];
                        callback(res.data.data.map((Element) => {
                            return {
                                ...Element,
                                value: Element.name.split("市")[0]
                            };
                        }));
                    }
                });
            },
            handleSelectDepart (item) {
                this.ready_select_data = {};
                this.filter_form.city = item.name.split("市")[0];
                this.$router.replace({
                    path: "/hotel",
                    query: {
                        cityName: this.filter_form.city
                    }
                }).catch(() => {});
                this.reload();
            },
            departGetReadyData () {
                setTimeout(() => {
                    if (this.ready_select_data && this.ready_select_data.name) {
                        this.filter_form.city = this.ready_select_data.name.split("市")[0];
                    }
                }, 200);
            },
            hide_popover () {
                this.popover_text = this.filter_form.adults_number + "成人 " + this.filter_form.children_number + "儿童";
                this.popover_active = true;
                this.show = false;
            },
            popover_show () {
                this.filter_form.adults_number = 2;
                this.filter_form.children_number = 0;
            },
            search () {
                this.$emit("change_select_filter", this.filter_form);
            }
        }
    };
</script>

.<style lang="less" scoped>
.container {
    position: relative;
    .hotel_filter {
        display: flex;
        .el-form {
            display: flex;
            .el-form-item {
                margin-right: 35px;
                &:last-child {
                    margin-right: 0;
                }
            }
        }
    }
    .input_box {
        width: 216px;
        height: 40px;
        border: 1px solid #C0C4CC;
        border-radius: 5px;
    }
    .el-popover__reference {
        width: 215px;
        padding-left: 15px;
    }
    .popover_button_text_class {
        margin-top: -1px;
        button {
            text-align-last: left;
            color: #CCD0D6;
            &.popover_active {
                color: #606266;
                width: 215px;
            }
            i {
                float: right;
                line-height: 16px;
            }
        }
    }
}
</style>
